import React, { Component } from 'react';
import { Tab } from '@alifd/next';
import TabBasicInfo from './components/TabBasicInfo';
import TabPaymentPlan from './components/TabPaymentPlan';
import TabReturnVisitRecord from './components/TabReturnVisitRecord';
import ApprovalHistory from './components/ApprovalHistory';

const tabs = [
    { tab: '基本信息', key: "0" },
    { tab: '回款计划', key: "1" },
    { tab: '回访记录', key: "2" },
    { tab: '审批历史', key: "3" },
];

export default class DetailTab extends Component {
    constructor(props) {
        super(props);
        this.state = {
            activeKey: "0",
            isHandleClick: false,
        }
    }

    componentWillReceiveProps(nextProps) {
        const {basicDetail} = this.props;
        if (!basicDetail || !basicDetail.data) {
            return false;
        }
        let _itemApplyCode = basicDetail && basicDetail.data && basicDetail.data.itemApplyCode
        if (nextProps.basicDetail.data.itemApplyCode !== _itemApplyCode) {
            this.setState({
                activeKey: "0",
                isHandleClick: false
            })
        }
    }

    changeTab = (activeKey) => {
        this.setState({
            activeKey: activeKey,
            isHandleClick: true
        })
    }

    render() {
        let that = this;
        const { activeKey, isHandleClick } = this.state;

        return (
            <Tab 
            activeKey={activeKey}
            navStyle={{backgroundColor: '#ffffff'}} 
            contentStyle={{backgroundColor: '#ffffff'}}
            onChange={this.changeTab}
            lazyLoad={true}
            //手动切换到Tab key == 0 时，不设置卸载子Item，即不重新执行子Tab中的请求
            //通过查询数据改变后切换到Tab key == 0，卸载子Item，重新执行子Tab中的请求
            unmountInactiveTabs={!isHandleClick && activeKey == "0" ? true : false}   
            >
                {
                    tabs.map(item => {
                        let ItemComponent;
                        if (item.key === "0") {
                            ItemComponent = (<TabBasicInfo {...that.props}/>)
                        } else if (item.key === "1") {
                            ItemComponent = (<TabPaymentPlan />);
                        } else if (item.key === "2") {
                            ItemComponent = (<TabReturnVisitRecord />);
                        } else if (item.key === "3") {
                            ItemComponent = (<ApprovalHistory  {...that.props}/>);
                        }
                        return (
                            <Tab.Item key={item.key} title={item.tab}>
                                {ItemComponent}
                            </Tab.Item>
                        )
                    })
                }
            </Tab>
        )
    }
}